// src/components/work/WorkHeader.tsx
import { BellOutlined, HomeOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Avatar, Input, Tabs } from 'antd';
import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

const { TabPane } = Tabs;

const WorkHeader: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate(); // 使用useNavigate来导航

  const renderProfileHeader = () => (
    <>
      <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
        <HomeOutlined style={{ fontSize: '20px', color: '#FF8800', marginRight: '10px' }} />
        <span style={{ fontSize: '18px' }}>工作台</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', marginLeft: 'auto', gap: '20px' }}>
        <Input placeholder="搜索" style={{ width: '200px', borderRadius: '20px', backgroundColor: '#F0F2F5' }} />
        <QuestionCircleOutlined style={{ fontSize: '20px', color: '#A5A5A5' }} />
        <BellOutlined style={{ fontSize: '20px', color: '#A5A5A5' }} />
        <Avatar size="large" style={{ backgroundColor: '#52C41A' }}>熊大</Avatar>
      </div>
    </>
  );

  const renderMembersHeader = () => (
    <>
      <div style={{ display: 'flex', alignItems: 'center', padding: '0 20px', backgroundColor: '#FFFFFF' }}>
        <Tabs defaultActiveKey="1" style={{ flex: 1 }} onChange={(key) => {
          if (key === '2') {
            navigate('/members'); // 导航到成员页面
          } else if (key === '3') {
            navigate('/roles'); // 导航到角色页面
          }
        }}>
          <TabPane tab={<span>成员</span>} key="2" />
          <TabPane tab={<span>角色</span>} key="3" />
        </Tabs>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', marginLeft: 'auto', gap: '20px' }}>
        <Input placeholder="搜索" style={{ width: '200px', borderRadius: '20px', backgroundColor: '#F0F2F5' }} />
        <QuestionCircleOutlined style={{ fontSize: '20px', color: '#A5A5A5' }} />
        <BellOutlined style={{ fontSize: '20px', color: '#A5A5A5' }} />
        <Avatar size="large" style={{ backgroundColor: '#52C41A' }}>熊大</Avatar>
      </div>
    </>
  );

  return (
    <div style={{ backgroundColor: '#FFFFFF', display: 'flex', alignItems: 'center', padding: '0 20px', borderBottom: '1px solid #EDEDED' }}>
      {location.pathname === '/profile' ? renderProfileHeader() : renderMembersHeader()}
    </div>
  );
};

export default WorkHeader;
